<!-- 将反应式和反应式详情合并 -->
<template>
  <div style="display: flex">
    <asideTabs
      :searchVocDetails="searchVocDetails"
      :vocId="vocId"
      :vocNext="vocNext"
      :path="path"
    ></asideTabs>
    <div class="reaction">
      <div class="reaction-title">
        请点击查看<span style="color: rgba(0, 84, 190, 1)"
          ><span v-html="formatting2(vocNext)"></span
          >{{ searchVocDetails }}</span
        >关联的反应式详细信息
        <!-- <div v-html="formatting('c6h6')"></div> -->
      </div>
      <!-- 参考信息 -->
      <div class="info">
        反应速率单位: 1级: <span>s<sup>-1</sup></span> ; 2级: cm<span
          class="small"
          ><sup>3</sup></span
        >/(molecule·s) ; 3级: cm<span class="small"><sup>6</sup></span
        >/(molecule<span class="small"><sup>2</sup></span
        >·s)
      </div>
      <!-- 催化反应  v-if="radio === '催化反应'"-->
      <div class="catalytic" v-loading="loading"
    element-loading-text="数据加载中"
    element-loading-spinner="el-icon-loading">
        <div class="title">热催化反应：</div>
        <div class="collapse">
          <el-collapse
            v-if="
              tableDataHot == undefined ||
              tableDataHot == null ||
              tableDataHot.length <= 0
            "
          >
            <el-collapse-item
              class="content"
              name="null"
              title="暂无数据"
            ></el-collapse-item>
          </el-collapse>
          <el-collapse
            v-model="activeNames"
            @change="handleChange"
            accordion
            v-for="(item, index) in tableDateHot"
            :key="index"
          >
            <el-collapse-item
              class="content"
              :title="item.equaPlain"
              :name="index"
            >
              <template slot="title"
                ><div v-html="formatting(item.equaPlain)"></div
              ></template>
              <div class="table">
                <el-table
                  :data="item.reactionCatalyticList"
                  style="width: 100%"
                  :header-cell-style="{ background: '#eef1f6', color: 'black' }"
                  :cell-style="{ height: '35px', padding: '0' }"
                >
                  <template v-for="(a, i) in tableDataHeader2">
                    <el-table-column
                      align="center"
                      :prop="a.prop"
                      :label="a.label"
                      :key="i"
                    ></el-table-column>
                  </template>
                  <el-table-column
                    align="center"
                    label="参考文献"
                    prop="refText"
                    :key="a"
                  >
                    <!-- 网站转跳 -->
                    <template slot-scope="scope">
                      <a :href="scope.row.refLink" target="_blank">{{
                        scope.row.refText
                      }}</a>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="title">光催化反应：</div>
        <div class="collapse">
          <el-collapse
            v-if="
              tableDataLight == undefined ||
              tableDataLight == null ||
              tableDataLight.length <= 0
            "
          >
            <el-collapse-item
              class="content"
              name="null"
              title="暂无数据"
            ></el-collapse-item>
          </el-collapse>
          <el-collapse
            v-model="activeNames"
            @change="handleChange"
            accordion
            v-for="(item, index) in tableDateLight"
            :key="index"
          >
            <el-collapse-item
              class="content"
              :title="item.equaPlain"
              :name="index"
            >
              <template slot="title"
                ><div v-html="formatting(item.equaPlain)"></div
              ></template>
              <div class="table">
                <el-table
                  :data="item.reactionCatalyticList"
                  style="width: 100%"
                  :header-cell-style="{ background: '#eef1f6', color: 'black' }"
                  :cell-style="{ height: '35px', padding: '0' }"
                >
                  <template v-for="(a, i) in tableDataHeader2">
                    <el-table-column
                      align="center"
                      :prop="a.prop"
                      :label="a.label"
                      :key="i"
                    ></el-table-column>
                  </template>
                  <el-table-column
                    align="center"
                    label="参考文献"
                    prop="refText"
                    :key="a"
                  >
                    <!-- 网站转跳 -->
                    <template slot-scope="scope">
                      <a :href="scope.row.refLink" target="_blank">{{
                        scope.row.refText
                      }}</a>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formattingVoc, formatting } from "@/api/formatVoc";
// import { getReactionData, getReactionSimpleData } from "@/api/publicSearch";
import { getReactionData } from "@/api/publicSearch";
import asideTabs from "@/components/AsideTabs";
export default {
  name: "resultView",
  components: { asideTabs },
  data() {
    return {
      form: {
        type: "",
      },
      //热催化反应
      tableDateHot: [],
      //光催化反应
      tableDateLight: [],
      Waterreaction: [],
      radio: "催化反应",
      searchVocDetails: "",
      vocId: "",
      equationId: "",
      equationDetail: "",
      //催化反应的表头
      tableDataHeader2: [
        {
          prop: "catalyzer",
          label: "催化剂",
        },
        {
          prop: "temprature",
          label: "温度(K)",
        },
        {
          prop: "actiHeat",
          label: "反应热(eV)",
        },
        {
          prop: "actiEnergy",
          label: "反应活化能(eV)",
        },
      ],
      vocNext: "",
      path: "catalytic",
    };
  },
  mounted() {
    this.vocId = this.$route.query.vocId;
    this.searchVocDetails = this.$route.query.searchVocDetails;
    this.vocNext = this.$route.query.vocNext;
    // getReactionSimpleData({
    //   id: this.vocId,
    //   fatherCategory: this.radio,
    // }).then((res) => {
    //   this.tableDateHot = res.data.data["热催化反应"];
    //   this.tableDateLight = res.data.data["光催化反应"];
    // });
    this.loading = true;
    getReactionData({
      id: this.vocId,
      fatherCategory: this.radio,
    }).then((res) => {
      this.tableDateHot = res.data.data["热催化反应"];
      this.tableDateLight = res.data.data["光催化反应"];
      this.loading = false;
    });
  },
  methods: {
    handleSelectionChangeOxygen(val) {
      this.Oxygenreaction = val;
    },
    handleSelectionChangeGas(val) {
      this.Gasreaction = val;
    },
    handleSelectionChangeWater(val) {
      this.Waterreaction = val;
    },
    //反应式格式化
    formatting(str) {
      return formattingVoc(str);
    },
    formatting2(str) {
      return formatting(str);
    },
    handle(e) {
      let target = e.target.parentNode.firstChild.innerHTML;
      if (target[0] !== "<") {
        this.equationId = e.target.dataset.id;
        this.equationDetail = e.target.dataset.react;
        this.$router.push({
          path: "/result",
          query: {
            equationId: this.equationId,
            equationDetail: this.equationDetail,
            radio: this.radio,
          },
        });
      }
    },
    //链接中跳转函数
    gotoNewpage(str, radio) {
      let path = str;
      //设置同一个大气和催化反应转换
      this.radio = radio;
      this.$router.push({
        path: path,
        query: {
          searchVocDetails: this.searchVocDetails,
          vocId: this.vocId,
          radio: this.radio,
          vocNext: this.vocNext,
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "../css/common.scss";
.reaction {
  margin: 0px;
  width: 90%;
  overflow-x: hidden;
  overflow-y: hidden;
  // height: 100px;
  .reaction-title {
    text-align: left;
    font-size: #{$first_font_size};
    font-weight: #{$first_font_weight};
    margin-top: #{$first_titile_top}px;
    margin-left: #{$first_titile_left}px;
    margin-bottom: #{$first_titile_bottom}px;
  }
  .title {
    text-align: left;
    font-size: #{$second_font_size};
    font-weight: #{$second_font_weight};
    margin-top: #{$second_titile_top}px;
    margin-left: #{$second_titile_left}px;
    margin-bottom: #{$second_titile_bottom}px;
  }
  .table {
    margin-left: 15px;
    margin-top: 15px;
    li {
      margin-left: 0px;
      margin-bottom: 20px;
      text-align: left;
      font-size: small;
      //  list-style-type :none;
    }
  }
  .el-button--medium {
    font-size: 18px;
  }
  .collapse {
    width: 90%;
    text-align: left;
    font-size: #{$third_font_size};
    font-weight: #{$third_font_weight};
    margin-top: #{$third_titile_top}px;
    margin-left: #{$third_titile_left}px;
    margin-bottom: #{$third_titile_bottom}px;
  }
  .catalytic {
    margin-left: 10px;
    .title {
      font-size: #{$value2}px;
    }
  }
  .info {
    text-align: left;
    font-size: #{$second_font_size};
    font-weight: #{$second_font_weight};
    margin-top: #{$second_titile_top}px;
    margin-left: #{$second_titile_left}px;
    margin-bottom: #{$second_titile_bottom}px;
  }
  .table el-table {
    max-height: #{$second_line_height}px;
  }
  div[class^="el-collapse-item"] :hover {
    color: rgba(0, 84, 190, 1);
  }
  .table :hover {
    color: black !important;
  }
  .table td {
    // height: #{$second_line_height}px;
    height: 10px !important;
  }
  // 箭头修改
  ::v-deep .el-collapse-item__header {
    align-items: flex-start;
    height: 37px;
    line-height: 40px;
  }
  ::v-deep .el-collapse-item__arrow {
    margin: 14px;
    order: -1;
  }
  // 箭头修改结束
  // 表头高度修改
  ::v-deep .el-table__header tr,
  ::v-deep .el-table__header th {
    // height: 10px;
    padding: #{$second_table_height}px;
  }
  // 表头高度修改结束
  //相关链接
  .link-ul li {
    list-style-type: square;
    width: 90%;
    text-align: left;
    color: rgba(0, 84, 190, 1);
    font-size: #{$third_font_size};
    font-weight: #{$third_font_weight};
    margin-top: #{$third_titile_top}px;
    margin-left: #{$third_titile_left}px;
    margin-bottom: #{$third_titile_bottom}px;
    cursor: pointer;
  }
  .link-title {
    text-align: left;
    font-size: #{$first_font_size};
    font-weight: #{$first_font_weight};
    margin-top: #{$first_titile_top}px;
    margin-left: #{$first_titile_left}px;
    margin-bottom: #{$first_titile_bottom}px;
  }
  a:visited {
    color: rgba(0, 84, 190, 1);
  }
  a:link {
    color: rgba(0, 84, 190, 1); /* 修改未访问链接的颜色为蓝色 */
    text-decoration: none; /* 移除下划线 */
  }
}
</style>
